import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({

  // 严格模式下：如果你写的代码不符合vue官方要求，那么都会报错
  // 比如Vue官方要求mutations里不能写异步代码
  strict: true,

  state: {
    count: 0,
    // 订单列表
    orders: [
      { id: 1, name: '可爱多', price: 9.9}, 
      { id: 2, name: '方便面', price: 3.5}, 
      { id: 3, name: '土坑酸菜', price: -2.5}, 
    ],

    userInfo: {
        nickname: 'jack',
        age: 16,
        sex: 1,
    }
  },

  // 是放方法的地方
  mutations: {

    // 里面提供一些专门用来修改state里数据的方法
    // vuex规定只能依靠mutations来修改state的数据
    // 参数1：固定的叫 state，就是获取当前vuex里的state
    add(state) {

      // 让当前state里的count进行+1操作
      state.count++

      // setTimeout(() => {

      //   // 让当前state里的count进行+1操作
      //   state.count++
      // }, 1000);
    },

    add5(state) {

      state.count += 5
    },

    // 参数1：永远都是固定的叫state
    // 参数2：就是外界调用函数时传入的参数
    // mutations里的方法最多只能接收外界传入一个参数
    // 所以这里写的num2无效
    // addSomeNum(state, num, num2) {
    //   console.log(num, num2) // 100 和 undefined
    //   state.count += num 
    // }
    // 如果要接收多个，可以包成一个对象来传递
    addSomeNum(state, obj) {
      // console.log(obj) // 对象里有num1和num2
      state.count += obj.num1
    }
  },

  actions: {

    asyncAdd (context, id) {
      // context代表上下文对象
      // 所谓上下文对象就是当前这个store实例
      // console.log(context.state.count)
      // 说过了，修改state里的状态
      // 只能通过 mutations来修改，所以下面这句话
      // 严格模式下报错了
      // context.state.count++
      // 但是它调用mutations来间接修改是可以的
      // context.commit('add')

      // 因为以后我们vuex里的数据有可能是发请求得来的
      // 发请求就是异步代码，所以actions的好处就是
      // 可以写异步代码，那么在这里发请求，拿到结果后
      // 再把结果通过mutations赋值给state就行了
      console.log('传递过来的id是', id)
      setTimeout(() => {
        
        context.commit('addSomeNum', { num1: 1000 })

      }, 1000);
    }
  },

  // vuex里的计算属性
  getters: {

    // 固定参数：state
    // 获得当前store对象里的state
    total (state) {

      let sum = 0
      state.orders.forEach( v => sum += v.price)
      return sum
    }
  }
})

export default store